<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全域旅游企业监测应急指挥平台</title>
  <link rel="icon" type="image/x-icon" href="../images/logo.png">
  <link rel="stylesheet" href="../plugin/M_select/js/M_select/M_select.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/home.css">
</head>

<body>
<div class="box">
  <!-- 头部 -->
  <div class="header-box">
    <img src="../images/headeBg.png" alt="">
    <div class="weather-box">
      <span>郑州 小雨转多云 32/16℃</span>
    </div>
    <h1 class="header-title"><img src="../images/header.png" alt=""></h1>
    <div class="header-action">
      <span class="action-time"></span>
      <a href="javascript:;">管理中心</a>
      <a href="javascript:;">退出</a>
    </div>
  </div>
  <div class="main-box">
    <!-- 侧边导航 -->
    <ul class="aside-box">
      <li class="active">
        <a href="./home.html">
                        <span>
                            <img class="aside-img" src="../images/home.png" alt="">
                            <img class="aside-imgA " src="../images/homeA.png" alt="">
                            首页
                        </span>
        </a>
      </li>
      <li>
        <a href="./surroundings/development.html">
                        <span>
                            <img class="aside-img" src="../images/huanjing.png" alt="">
                            <img class="aside-imgA" src="../images/huanjingA.png" alt="">
                            产业发展环境
                        </span>
        </a>
      </li>
      <li>
        <a href="./basic/basic.html">
                        <span>
                            <img class="aside-img" src="../images/yaosu.png" alt="">
                            <img class="aside-imgA" src="../images/yaosuA.png" alt="">
                            产业基础要素
                        </span>
        </a>
      </li>
      <li>
        <a href="./passengerFlow/destination.html">
                        <span>
                            <img class="aside-img" src="../images/keliu.png" alt="">
                            <img class="aside-imgA" src="../images/keliuA.png" alt="">
                            旅游客流监测
                        </span>
        </a>
      </li>
      <li>
        <a href="./productTesting/index.html">
                        <span>
                            <img class="aside-img" src="../images/chanpin.png" alt="">
                            <img class="aside-imgA" src="../images/chanpinA.png" alt="">
                            旅游产品监测
                        </span>
        </a>
      </li>
      <li>
        <a href="./enterprise/scenicMonitor.html">
                        <span>
                            <img class="aside-img" src="../images/qiye.png" alt="">
                            <img class="aside-imgA" src="../images/qiyeA.png" alt="">
                            旅游企业监测
                        </span>
        </a>
      </li>
      <li>
        <a href="./tourismProject/index.html">
                        <span>
                            <img class="aside-img" src="../images/xiangmu.png" alt="">
                            <img class="aside-imgA" src="../images/xiangmuA.png" alt="">
                            旅游项目监测
                        </span>
        </a>
      </li>
      <li>
        <a href="./brand/brand.html">
                        <span>
                            <img class="aside-img" src="../images/pinpai.png" alt="">
                            <img class="aside-imgA" src="../images/pinpaiA.png" alt="">
                            旅游品牌监测
                        </span>
        </a>
      </li>
    </ul>
    <!-- 主题内容 -->
    <div class="content-box flex-between">
      <!-- 左侧 -->
      <div class="left-box">
        <!-- 旅游资源 -->
        <div class="ziyuan">
          <div class="title-box flex-between-center">
            <h3>
              <img src="../images/titile-img.png" alt="">
              旅游资源
            </h3>
            <a href="javascript:;">查看更多</a>
          </div>
          <div class="ziyuan-info">
            <div class="info-item">
              <img src="../images/5Ajingqu.png" alt="">
              <p>5A景区</p>
              <h3>7个</h3>
            </div>
            <div class="info-item">
              <img src="../images/4Ajingqu.png" alt="">
              <p>4A景区</p>
              <h3>43个</h3>
            </div>
            <div class="info-item">
              <img src="../images/3Ajingqu.png" alt="">
              <p>3A景区</p>
              <h3>200个</h3>
            </div>
            <div class="info-item">
              <img src="../images/hotel5.png" alt="">
              <p>5星酒店</p>
              <h3>15个</h3>
            </div>
            <div class="info-item">
              <img src="../images/hotel4.png" alt="">
              <p>4星酒店</p>
              <h3>68个</h3>
            </div>
            <div class="info-item">
              <img src="../images/minsu.png" alt="">
              <p>民宿</p>
              <h3>121个</h3>
            </div>
          </div>
        </div>
        <!-- 游客量 -->
        <div>
          <div class="title-box">
            <h3>
              <img src="../images/titile-img.png" alt="">
              旅游游客量
            </h3>
          </div>
          <div class="visitor-number-chart">
            <div class="chart-hd" id="chart1-1-1"></div>
            <div class="chart-hd" id="chart1-1-2"></div>
            <div id="chart1-1-3"></div>
          </div>
          <div class="change-box">
            <div class="line-box"></div>
            <ul>
              <li>
                <i></i>
                <span>景区</span>
              </li>
              <li>
                <i></i>
                <span>酒店</span>
              </li>
              <li class="active">
                <i></i>
                <span>旅行社</span>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div class="title-box">
            <h3>
              <img src="../images/titile-img.png" alt="">
              重点景区客流
            </h3>
          </div>
          <div class="chart-box" id="chart1-2"></div>
        </div>
        <div class="chart-flex">
          <!-- 左侧 -->
          <div>
            <div class="title-box">
              <h3>
                <img src="../images/titile-img.png" alt="">
                游客出行交通方式
              </h3>
            </div>
            <div class="chart-box" id="chart1-3"></div>
          </div>
          <!-- 右侧 -->
          <div>
            <div class="title-box">
              <h3>
                <img src="../images/titile-img.png" alt="">
                游客产业消费占比
              </h3>
            </div>
            <div class="chart-box" id="chart1-4"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center-box">
        <div class="center-title">
          <div>
            <h3>年度累计游客量(万人)</h3>
            <!--                            <p><span>1</span><span>6</span><span>5</span><span>8</span><i>,</i><span>6</span><span>5</span><span>2</span>-->
            <!--                            </p>-->
            <div class="numberStyle">1650,580</div>
          </div>
          <div>
            <h3>旅游总收入(万元)</h3>
            <!--                            <p><span>0</span><span>1</span><span>9</span><span>6</span><i>,</i><span>8</span><span>6</span><span>5</span>-->
            <!--                            </p>-->
            <div class="numberStyle">8950,802</div>
          </div>
        </div>
        <div class="center-map-box" id="chart1-7"></div>
        <!-- 视频监控 -->
        <div class="monitor-box">
          <div class="title-box flex-between-center">
            <h3>
              <img src="../images/titile-img.png" alt="">
              视频监控
            </h3>
            <div class="selected">
              <div class="select-box">
                <select name="" id="select-sheng" class="sheng">
                  <option value="">河南省</option>
                  <option value="">湖南省</option>
                  <option value="">四川省</option>
                </select>
              </div>
              <div class="select-box">
                <select name="" id="select-shi" class="shi">
                  <option value="">郑州市</option>
                  <option value="">焦作市</option>
                  <option value="">洛阳市</option>
                </select>
              </div>
              <div class="select-box">
                <select name="" id="select-jingqu" class="jingqu">
                  <option value="">云台山</option>
                  <option value="">白云山</option>
                  <option value="">银基水世界</option>
                </select>
              </div>
            </div>
          </div>
          <div class="video-box">
            <video src="http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4" controls></video>
            <video src="http://139.129.111.136/in1/templates/wechatmanage/image/2.mp4" controls></video>
            <video src="http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4" controls></video>
            <video src="http://139.129.111.136/in1/templates/wechatmanage/image/2.mp4" controls></video>
          </div>
        
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-box">
        <div>
          <div class="title-box">
            <h3>
              <img src="../images/titile-img.png" alt="">
              预警信息
            </h3>
          </div>
          <div class="info-list scrollbar">
            <p><span class="listItem-left">气象预警(1):<i>大雾黄色预警</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
            <p><span class="listItem-left">交通预警(2):<i>京广高速发生事故</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
            <p><span class="listItem-left">安全预警(3):<i>发生山体滑坡</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
            <p><span class="listItem-left">客流预警(4):<i>景区客流预警</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
            <p><span class="listItem-left">舆情预警(5):<i>景区内现天价饭菜</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
            <p><span class="listItem-left">交通预警(4):<i>京广高速严重拥堵</i></span><span
                class="listItem-right"><em>10-12</em><a href="javascript:;">查看</a></span></p>
          
          </div>
        </div>
        <div>
          <div class="title-box">
            <h3>
              <img src="../images/titile-img.png" alt="">
              游客满意度
            </h3>
          </div>
          <div class="chart-box" id="chart1-5">
          
          </div>
        </div>
        <div>
          <div class="title-box flex-between-center">
            <h3>
              <img src="../images/titile-img.png" alt="">
              客源地
            </h3>
            <div class="customers-box">
              <a href="javascript:;" class="active">客源省<i>TOP10&uarr;</i></a>
              <a href="javascript:;">客源城市<i>TOP10&uarr;</i></a>
            </div>
          </div>
          <div class="customers-box-chart chart-box">
            <div id="chart1-6-1"></div>
            <div class="chart-hd" id="chart1-6-2"></div>
          </div>
        </div>
        <div>
          <div class="title-box flex-between-center">
            <h3>
              <img src="../images/titile-img.png" alt="">
              品牌口碑红黑榜
            </h3>
            <div class="brand-reputation-box">
              <a href="javascript:;" class="active">景区</a>
              <a href="javascript:;">酒店</a>
            </div>
            <a href="javascript:;" class="more">查看更多</a>
          </div>
          <div class="brand-reputatio-chart chart-box">
            <div>
              <div>
                <h3>红榜<i>TOP5</i></h3>
                <p><em>1</em><span>云台山</span></p>
                <p><em>2</em><span>少林寺</span></p>
                <p><em>3</em><span>清明上河园</span></p>
                <p><em>4</em><span>龙门石窟</span></p>
                <p><em>5</em><span>白云山</span></p>
              </div>
              <div>
                <h3>黑榜<i>TOP5</i></h3>
                <p><em>1</em><span>石人山</span></p>
                <p><em>2</em><span>丹江水库</span></p>
                <p><em>3</em><span>伏牛山</span></p>
                <p><em>4</em><span>黄河风景名胜区</span></p>
                <p><em>5</em><span>鸡公山</span></p>
              </div>
            </div>
            <div class="chart-hd">
              <div>
                <h3>红榜<i>TOP5</i></h3>
                <p><em>1</em><span>酒店1</span></p>
                <p><em>2</em><span>酒店2</span></p>
                <p><em>3</em><span>酒店3</span></p>
                <p><em>4</em><span>酒店4</span></p>
                <p><em>5</em><span>酒店5</span></p>
              </div>
              <div>
                <h3>黑榜<i>TOP5</i></h3>
                <p><em>1</em><span>黑酒店1</span></p>
                <p><em>2</em><span>黑酒店2</span></p>
                <p><em>3</em><span>黑酒店3</span></p>
                <p><em>4</em><span>黑酒店4</span></p>
                <p><em>5</em><span>黑酒店5</span></p>
              </div>
            </div>
          </div>
          <div>
          
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<script src="../plugin/jquery-1.11.1.min.js"></script>
<script src="../plugin/ECharts/echarts.js"></script>
<script src="../plugin/ECharts/china.js"></script>
<script src="../plugin/M_select/js/M_select/M_select.js"></script>
<script src="../js/jquery.leoTextAnimate.js"></script>
<script src="../js/home.js"></script>
<script>
  <!-- 数字 -->
  $('.numberStyle').leoTextAnimate({
    delay: 1000, //延时出现时间
    autorun: true, //是否自动运行
    fixed: [',', ':', '.'], //
    start: '0'
  });
  // 头部时间
  function getTime() {
    let times = new Date()
    let year = times.getFullYear()
    let month = times.getMonth() + 1
    let date = times.getDate()
    let hours = times.getHours()
    let minutes = times.getMinutes()
    let seconds = times.getSeconds()
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds
    let setTime = year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds
    $('.action-time').text(setTime)
  }

  setInterval(getTime, 1000)

  // 左侧菜单
  function getMenu() {
    $('.aside-box li').click(function () {
      $(this).addClass('active').siblings('li').removeClass('active')
    })
  }

  getMenu()
  //天气
  // $.get("https://free-api.heweather.com/s6/weather?location=auto_ip&key=a254e7178ce645038748a23a07664bf2", function(result) {
  //     let basic = result.HeWeather6[0];
  //     let today = basic.daily_forecast[0];
  //     let city = basic.basic.parent_city
  //     let weather,tmp;
  //     // $('#weatherImg').attr('src',`https://cdn.heweather.com/cond_icon/${today.cond_code_d}.png`)
  //     console.log(today)
  //     if (today.cond_txt_d == today.cond_txt_n) {
  //         weather =today.cond_txt_d;
  //     } else {
  //         weather=today.cond_txt_d + "转" + today.cond_txt_n
  //     };
  //     tmp =today.tmp_min + "/" + today.tmp_max + '°C';
  //     $('.header-box .weather-box span').text(city+" "+weather+" "+tmp)
  //
  // })
  $('.header-box .weather-box span').text('郑州市 晴 12/22℃')
  $('.header-box .weather-box').append(`<img src="../images/sun.png" />`)
  //动态数字
  //   $(function () {
  //     setInterval(function () {
  //       show_num1(sum)
  //     }, 1000);
  //   });
</script>
</body>

</html>
